<template>
  <div class="fileStyle">
    <div class="file_content">
        <header class="header_content">
          <el-col :span="20">
            <el-input
              placeholder="请输入对应的项目名称"
              v-model="input1">
              <el-button slot="append" icon="el-icon-search" @click="searchFunc"></el-button>
            </el-input>
          </el-col>
        </header>

      <template>
          <div>
            <ul class="content_box">
              <li v-for="(item,index) in projectContentList" :key="index" class="content_box_list">
                <div class="left_content">
                  <img v-if="item.img" :src="item.img">
                  <img v-else src="@/assets/2.jpg" >
                </div>
                <div class="right_content">
                  <div class="right_content_top">
                    <span>项目名称：{{item.name}}</span>
                  </div>
                  <div class="right_content_content">
                    <span>类型：{{item.cycle}}</span>
                    <span>技术栈：</span>
                    <span v-for="(itemdeve,indexdeve) in item.developer" :key="indexdeve">{{itemdeve}}</span>
                  </div>
                  <div class="right_content_bottom">
            <span>
              发布于{{item.startTime}}小时|{{item.applicantspeo}}报名</span>
                  </div>
                </div>
                <div class="content_money">
<!--                  <div>{{item.state==1?''}}</div>-->
                  已发布
                  ￥{{item.money}}
                </div>

              </li>
            </ul>
            <div class="block">
              <!--      <span class="demonstration">显示总数</span>-->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :page-size="100"
                background
                layout="total, prev, pager, next"
                :total="1000">
              </el-pagination>
            </div>
          </div>
      </template>
</div>

  </div>
</template>

<script>
export default {
  name:'file',
data(){
    return{
        input1:'',
        projectContentList:[
        {name:'百度网盘 好友发送指定 关键字 匹配正确后，分享指定文件给他',developer:['java','c++'],type:'web网页',cycle:'45天',money:1000,startTime:'2个小时前',applicantspeo:10,state:1},
        {name:'百度网盘 好友发送指定 关键字 匹配正确后，分享指定文件给他',developer:['vue'],type:'web网页',cycle:'45天',money:1000,startTime:'2个小时前',applicantspeo:10,state:1},
        {name:'百度网盘 好友发送指定 关键字 匹配正确后，分享指定文件给他',developer:['php'],type:'web网页',cycle:'45天',money:1000,startTime:'2个小时前',applicantspeo:10,state:1}],
      currentPage1:1
    }
},
  methods:{
    //分页
    handleSizeChange(){},
    handleCurrentChange(){},
    searchFunc(){
      console.log(this.input1)
    }
  }
}
</script>

<style lang="less" scoped>
.fileStyle{
  width: 100%;
  background-color: rgb(240,245,246);
 .file_content{
  width: 95%;
   margin: 0 auto;
   display: flex;
   /*justify-content: center;*/
   /*align-items: center;*/

   flex-direction: column;
   .header_content{
     display: flex;
     justify-content: center;
     height: 51px;
     margin-top: 10px;

   }
 }
}
.content_box_list{
  width: 100%;
  /*height: 60px;*/
  overflow: hidden;
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 5px;
  margin: 10px auto;
  position: relative;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  align-items: center;
  .left_content{
    width: 70px;
    height: 70px;
    display: flex;
    /*align-content: center;*/
    /*position: absolute;*/
    /*transform: translate(0,-50%);*/
    img{
      width: 100%;
      height: 100%;
    }
  }
  .right_content{
    flex:1;
    padding-right: 50px;
    padding-left: 40px;
    font-size: 14px;
    /*background-color: skyblue;*/
    .right_content_top{
      width: 100%;
      height: 30px;
      line-height:30px;
      font-weight: 600;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      word-break:break-all;
    }
    .right_content_content{
      width: 100%;
      height: 30px;
      line-height: 30px;
    }
    .right_content_bottom{
      width: 100%;
      height: 30px;
      color: rgb(150,195,232);
      font-size: 12px;
      line-height: 30px;
    }
  }
  .content_money{
    /*width: 40px;*/
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translate(0,-50%);
  }
}
.header_search{
  position: relative;
  width: 50%;
  margin: 0 auto;
}
.modalStyle{
  width: 100%;
  height: 100%;
  background-color: rgb(240,242,245);
  overflow: hidden;
}
.header{
  position: relative;
  width: 78vw;
  /*height: 30%;*/
  box-sizing: border-box;
  background-color: white;
  padding: 10px;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 10px;
}
.content{
  width: 78%;
  height: 400px;
  margin: 0 auto;
  /*background: skyblue;*/
  margin-top: 10px;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
}
.search_icon{
  position: absolute;
  top: 0;
  right: 0;
}
/deep/ .el-input--suffix .el-input__inner{
  padding-right: 57px;
}
.el-input{
  /*width: 50%;*/
  margin: 0 auto;
}
.ulstyle{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  font-size: 13px;
  /*font-weight: 600;*/
  li{
    width: 15%;
    margin: 2px;
  }
}
.content_box{
  width: 78vw;
  /*background-color: white;*/
  margin-top: 10px;
  border-radius: 10px;
  margin: 0 auto;
  padding: 0;
}
.block{
  display: flex;
  position: fixed;
  bottom: 5px;
  width: 78vw;
  /*background: rebeccapurple;*/
  left: 50%;
  transform: translate(-50%);
  justify-content: flex-end;
}
</style>
